<!--新页面模板-->
<template>
  <!--  边坡技术评定记录-->
  <div class="box-view">
    <el-row :gutter="15">

      <el-col :span="24">
        <div class="page">

          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
<!--          <el-divider></el-divider>-->
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="输入可查询" style="width:350px">
              <template slot="prepend">边坡编号/名称</template>
            </el-input>
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
            <!--            <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">-->
            <!--              <el-option-->
            <!--                v-for="item in roadSelectList"-->
            <!--                :key="item.id"-->
            <!--                :label="item.name"-->
            <!--                :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <el-select v-model="form.slopeId" filterable clearable placeholder="选择边坡" @focus="getSlopeList">
              <el-option
                v-for="item in slopeSelectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

            <el-date-picker
              v-model="form.startCreateTime"
              type="datetime"
              style="width: 200px"
              value-format="timestamp"
              placeholder="选择开始日期"/>
            <el-date-picker
              v-model="form.endCreateTime"
              type="datetime"
              style="width: 200px"
              value-format="timestamp"
              placeholder="选择终止日期"/>
            <el-select v-model="form.techniqueType" filterable style="width: 200px" clearable placeholder="评定等级">
              <el-option
                v-for="item in EnumTechniqueTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
<!--            <button class=" common_btn-defalut" style="margin-bottom: 20px" @click="newForm=true;isDisabled=false">填写边坡状况评定表</button>-->
            <el-radio-group v-model="form.isQueryHistory" @change="form.page=1;queryList()">
              <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex(scope.$index)}}
                </template>
              </el-table-column>
              <el-table-column prop="slopeNo" min-width="180" label="边坡编号"></el-table-column>
              <el-table-column prop="name" show-overflow-tooltip min-width="180" label="边坡名称"></el-table-column>
              <el-table-column prop="roadName" width="140" show-overflow-tooltip label="所属路线"></el-table-column>
              <el-table-column prop="deptName" width="150" show-overflow-tooltip label="管养单位"></el-table-column>
              <el-table-column prop="investigator" min-width="100" show-overflow-tooltip label="调查人"></el-table-column>
              <el-table-column prop="investigationDeptTreeName" min-width="100" show-overflow-tooltip
                               label="调查单位 "></el-table-column>
              <el-table-column prop="techniqueTypeName" min-width="100" label="分数">
                <el-table-column prop="riskLevelName" min-width="120" label="评定等级">
                  <template slot-scope="scope">
                    <span v-if="scope.row.techniqueTypeName === '计算错误'" style="color: #ff7a00">{{scope.row.techniqueTypeName}}</span>
                    <span v-else style="color: #4caf50">
                      <p>{{scope.row.score}}</p>
                      <el-tag size="mini" :style="scope.row.techniqueType| gradeDangerColor"
                              style="color: white">
                        {{scope.row.techniqueTypeName}}
                      </el-tag>
                    </span>
                  </template>
                </el-table-column>
                <template slot-scope="scope">
                  <span v-if="scope.row.techniqueTypeName === '计算错误'" style="color: #ff7a00">{{scope.row.techniqueTypeName}}</span>
                  <span v-else style="color: #4caf50">{{scope.row.techniqueTypeName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="investigateTime" width="120" label="调查日期">
                <template slot-scope="scope">{{scope.row.investigationTime | formatTimer2}}</template>
              </el-table-column>
              <el-table-column prop="count" width="100" sortable label="次序"></el-table-column>
              <el-table-column label="操作" fixed="right" min-width="260">
                <template slot-scope="scope">
                  <el-popconfirm v-if="hasPermission('slope:tech:del')"  confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                    <button slot="reference" class="btn_delete">删除</button>
                  </el-popconfirm>
                  <button class="btn_edit" @click="checkDetail(scope.row)" style="margin-left: 0.5vw">查看详情</button>
<!--                  <button class="btn_add" @click="editDetail(scope.row)">编辑</button>-->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
              :total="form.total">
            </el-pagination>
          </div>
          <!--          查看编辑-->
          <el-drawer :title="showDetailTitle"
                     :visible.sync="showDetail"
                     v-if="showDetail"
                     custom-class="demo-drawer"
                     size="60%">
            <div class="demo-drawer__content1">
              <technical-check-detail ref="operation" :currentRow="currentRow" :template="currentRow.formList"
                                      :isLook="isLook" @submit="submit"></technical-check-detail>
            </div>
          </el-drawer>
          <!--          新增-->
          <el-drawer
            title="边坡技术状况评定调查表"
            :key="drawerKey"
            :visible.sync="newForm"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="70%">
            <div class="demo-drawer__content">
              <technical-check-form @changedis="disableds" ref="technicalForm" @submitClose="submitClose"></technical-check-form>
            </div>
            <div class="demo-drawer__footer">
              <el-button @click="newForm=false" type="info">取 消</el-button>
              <!--              -->
              <el-button type="primary" @click="submitDrawer"  :disabled="isDisabled" class=" common_btn-defalut">
                确 定
              </el-button>
            </div>
          </el-drawer>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import technicalCheckForm from "./technicalCheckForm";
  import ItemMixins from "../item.mixins";
  import {getTechnicalDetail, getTechnicalFormList,technicalDelete} from '@/services/model/form';
  import TechnicalCheckDetail from "./detail";
  import Enums from '@/utils/enums'

  export default {
    components: {
      TechnicalCheckDetail,
      technicalCheckForm
    },
    mixins: [ItemMixins,Enums],
    props:['deptTreeId'],//接收psMsg值
    data() {
      return {
        restaurants:[],
        state: '',
        timeout:  null,
        isDisabled:true,
        drawerKey: 1,
        showDetailTitle: '',
        newForm: false,
        isLook: true,
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        tableList: [],
        currentRow: {
          formList: []
        },
        form: {
          page: 1,
          pageSize: 10,
          roadSectionId: '',
          startCreateTime: null,
          endCreateTime: null,
          isQueryHistory: 0,
        },
        showDetail: false,
        EnumTechniqueTypeList: [],
      }
    },
    watch: {},
    computed: {},
    mounted() {
      this.queryDictList(['EnumTechniqueType'], ['EnumTechniqueTypeList'])
    },
    methods: {
      disableds(value){
        this.isDisabled=value
      },
      async handleDelete(id){
        let res = await technicalDelete({id:id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '删除成功'
          })
        }
        this.queryList()
      },
      getSlopeList() {
        if (!this.form.roadId) {
          this.$message('请先选择路线');
          return
        }
      },
      submitClose() {
        this.drawerKey += 1
        this.newForm = false
        this.queryList()
      },
      submitDrawer() {
        this.$refs.technicalForm.validatorForm()
      },
      submit() {
        this.currentRow = {};
        this.showDetail = false
        this.queryList()
      },
      changeRoad() {
        this.$set(this.form, 'slopeId', '');
        const {deptTreeId, roadId} = this.form
        this.getSelectSlopeList(deptTreeId, roadId)
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel(deptTreeId) {
        this.$forceUpdate()
        this.form.deptTreeId = deptTreeId
        this.queryList()
        this.changeDept()
      },
      async editDetail(row) {
        // return
        this.showDetail = true
        this.showDetailTitle = '编辑边坡技术状况评定表'
        this.isLook = false
        let detail = await getTechnicalDetail({id: row.id})
        this.currentRow = detail.data
      },
      async checkDetail(row) {
        this.showDetail = true
        this.showDetailTitle = '查看边坡技术状况评定详情'
        this.isLook = true
        let detail = await getTechnicalDetail({id: row.id})
        this.currentRow = detail.data
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      async queryList() {
        return
        //
        // let res = await getTechnicalFormList(this.form)
        // this.tableList = res.data?.records || []
        // this.form.page = Number(res.data?.current)
        // this.form.total = Number(res.data?.total)


      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      //获取路线列表
      async changeDept() {
        this.getRoadListByDept(this.form.deptTreeId)
      },
    },
  }


</script>
<style scoped="scoped" lang="less">

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .demo-drawer__content {
    padding-right: 30px;
    height: 75%;
    overflow: auto;
  }

  .demo-drawer__footer {
    bottom: 2%;
  }

  /deep/ .demo-drawer__content1 {
    width: 100%;
    overflow: auto;
  }

</style>
